<template>
  <el-collapse-item :title="name" :name="id">
              <div>
                <el-image
                  style="
                    width: 13%;
                    height: 100px;
                    border-radius: 5px;
                    margin: 10px;
                    float: left;
                  "
                  :src="picture"
                  fit="cover"
                />
                <div class="list" >
                  <div class="column">
                    <el-space direction="vertical" style="display: block;">
                      <el-text size="small">别名：{{ otherName }}</el-text>
                      <el-text size="small">产地：{{ origin }}</el-text>
                      <el-text size="small">季节：{{ season }}</el-text>
                      <el-text size="small">光照：{{ sunshine }}</el-text>
                      <el-text size="small">温度：{{ temperature }}</el-text>
                      <el-text size="small">土壤：{{ soil }}</el-text>
                      <el-text size="small">水分：{{ moisture }}</el-text>
                      <el-text size="small">种植：{{ plant }}</el-text>
                    </el-space>
                  </div>
                  <div class="column">
                    <el-space direction="vertical" style="display: block;">
                      
                      
                      <el-text size="small">施肥：{{ manure }}</el-text>
                      <el-text size="small">浇水：{{ water }}</el-text>
                      <el-text size="small"
                        >光线：{{ temperatureLight }}</el-text
                      >
                      <el-text size="small">防护：{{ protect }}</el-text>
                    </el-space>
                  </div>
                </div>
              </div>
            </el-collapse-item>
</template>

<script>
export default {
    props: {
        name: String,
        id: Number,
        picture: String,
        otherName: String,
        origin: String,
        season: String,
        sunshine: String,
        temperature: String,
        soil: String,
        moisture: String,
        plant: String,
        manure: String,
        water: String,
        temperatureLight: String,
        protect: String,
  },
}
</script>

<style scoped>
.column {
  flex: 1;
  padding: 10px;
}
.list {
  background: linear-gradient(269deg, #ffefdf, #fcf3d900);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}

</style>